import { Link, Outlet } from "umi";
import { useEffect, useRef, useState } from "react";
// import styles from "./index.less";

export default function Layout() {
  const [isShow, setIsShow] = useState(styles.hover_hide);
  const domRef = useRef(null);

  useEffect(() => {
    const dom = domRef.current;

    const handleMouseOver = () => setIsShow("");
    const handleMouseOut = () => setIsShow(styles.hover_hide);

    dom.addEventListener("mouseover", handleMouseOver);
    dom.addEventListener("mouseout", handleMouseOut);

    return () => {
      dom.removeEventListener("mouseover", handleMouseOver);
      dom.removeEventListener("mouseout", handleMouseOut);
    };
  }, []);

  return (
    <div className={styles.content}>
      {/* <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/docs">Docs</Link>
        </li>
        <li>
          <a href="https://github.com/umijs/umi">Github</a>
        </li>
      </ul> */}
      {/* <Outlet /> */}
      <div className={styles.head}>
        <div className={styles.info}>
          <div className={styles.icon}></div>
          <div className={styles.text}>产品介绍</div>
        </div>

        {/* <div className={styles.recharge}>充值</div> */}
      </div>

      <div className={styles.body}>
        <div className={styles.phone_box}></div>
        <div className={styles.body_text}>
          <div className={styles.body_icon}></div>
          <div className={styles.body_content}>
            SYNCING
            PTE.LTD.成立于2024年，旗下PartyNow手游、APP出海自动营销平台是国内领先的专注游戏试玩、出海的一站式移动营销服务平台。公司通过自主研发高品质移动网盟平台、海外大媒体投放平台和休闲游戏海外发行平台，为游戏公司出海提供一站式的营销服务，我们专注于为广告主与游戏应用开发者提供高效的用户获取及流量变现的一站式综合解决方案。
          </div>

          {/* <div className={styles.dowload}>
            <div className={styles.btn}>
              <div className={styles.btn_icon}></div>
              <p className={styles.btn_text_left}>Android</p>
              <p className={styles.btn_text_right}>下载</p>
            </div>

            <div className={`${styles.btn} ${styles.btn_right}`}>
              <div className={styles.btn_icon}></div>
              <p className={styles.btn_text_left}>IOS</p>
              <p className={styles.btn_text_right}>下载</p>
            </div>
          </div> */}
        </div>
      </div>

      <div className={styles.bg1}></div>
      <div className={styles.bg2}></div>

      <div className={styles.footer}>
        <div className={styles.footer_top}>
          {/* <div className={styles.footer_text}>用户协议</div>
          <div className={styles.line}></div>
          <div className={styles.footer_text}>隐私政策</div>
          <div className={styles.line}></div> */}
          <div className={`${styles.footer_text} ${styles.hover}`} ref={domRef}>
            联系我们
          </div>
          <div className={`${styles.hover_show} ${isShow}`}>
            地址：8 KAKI BUKIT AVENUE 4 #08-32 PREMIER @ KAKI BUKIT
            SINGAPORE(415875)
          </div>
        </div>

        <div className={styles.name}>SYNCING PTE. LTD.</div>
      </div>
    </div>
  );
}
